<template>

	<!-- 解析视频 -->
	<el-dialog title="关联视频" :visible.sync="videoAnalysisVisible" width="60%" @close="handleOk">
		<div>
			<el-table :data="videoSelectData" border class="table margin-bottom20"
				header-cell-class-name="table-header-style">
				<el-table-column label="序号" width="55" align="center">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column label="缩略图" align="center">
					<template slot-scope="scope">
						<img :src="scope.row.thumbnail||''" alt="" class="width100 height100 overflow-auto">
					</template>
				</el-table-column>
				<el-table-column prop="title" label="视频标题" align="center"></el-table-column>
				<el-table-column prop="duration" label="视频时长" align="center"></el-table-column>
				<el-table-column prop="fileSize" label="视频大小" align="center"></el-table-column>
				<el-table-column prop="sort" label="视频分类" align="center"></el-table-column>
				<el-table-column prop="createTime" label="添加时间" align="center"></el-table-column>
				<el-table-column label="操作" align="center" width="100">
					<template slot-scope="scope">
						<el-popconfirm title="确认删除吗？" @confirm="deleteVideoData(scope.$index, scope.row)">
							<span class="blue-text" slot="reference">删除</span>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<div class="row-me row-center flex-wrap margin-bottom20">
				<el-select clearable placeholder="请选择科目" v-model="videoQuery.appid" class="width200 margin-right20">
					<el-option v-for="(item,index) in miniData" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-select clearable placeholder="请选择视频分类" v-model="videoQuery.sort" class="width200 margin-right20">
					<el-option v-for="(item,index) in videoData" :key="index" :label="item.name" :value="item.id"></el-option>
				</el-select>
				<el-input class="width200 margin-right20" v-model="videoQuery.title" suffix-icon="el-icon-search"
					placeholder="请输入相关视频标题">
				</el-input>
				<el-button type="primary" @click="getQuestionVideo">搜索</el-button>
			</div>
			<el-button type="primary" class="margin-bottom20" @click="handleAdd">确认添加</el-button>
			<el-table :data="videoAnalysisData" border class="table" ref="multipleVideoTable"
				header-cell-class-name="table-header" @selection-change="handleSelectionVideoChange">
				<el-table-column type="selection" width="55" align="center" :selectable="selecVideotable">
				</el-table-column>
				<el-table-column label="序号" width="55" align="center">
					<template slot-scope="scope">
						{{ scope.$index + 1 }}
					</template>
				</el-table-column>
				<el-table-column label="缩略图" align="center">
					<template slot-scope="scope">
						<img :src="scope.row.thumbnail||''" alt="" class="width100 height100 overflow-auto">
					</template>
				</el-table-column>
				<el-table-column prop="title" label="视频标题" align="center"></el-table-column>
				<el-table-column prop="duration" label="视频时长" align="center"></el-table-column>
				<el-table-column prop="fileSize" label="视频大小" align="center"></el-table-column>
				<el-table-column prop="sort" label="视频分类" align="center"></el-table-column>
				<el-table-column prop="createTime" label="添加时间" align="center"></el-table-column>
			</el-table>
			<div class="margin-top10">
				<el-pagination background layout="->,total,sizes, prev, pager, next" :current-page="videoQuery.pageNumber"
					:page-sizes="[10, 20, 30, 40]" @size-change="handleSizeVideoChange" :page-size="videoQuery.pageSize"
					:total="videoTotal" @current-change="handlePageVideoChange"></el-pagination>
			</div>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="videoAnalysisVisible = false">关 闭</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: 'associatedVideo',
		data() {
			return {
				videoAnalysisVisible: false,
				videoSelectData: [],
				videoQuery: {
					pageNumber: 1,
					pageSize: 10
				},
				videoTotal: 0,
				videoAnalysisData: [],
				miniData: [],
				videoData: [],
				multipleSelection: []
			}
		},
		mounted() {
			this.getAll()
			this.getVideoSort()
		},
		methods: {
			handleOk() {
				this.$emit('handleVideoOk')
			},
			async handleAdd() {
				if (this.multipleSelection.length == 0) return
				let ids = Array.from(this.multipleSelection, ({
					id
				}) => id)
				const res = await this.$post(`/admin/questionVideo/addVideos?questionId=${this.videoQuery.questionId}`, ids)
				this.getVideoAnalysis()
			},
			//获取所有科目
			async getAll() {
				const res = await this.$get('/admin/minis/getAll')
				if (res.code == 1000) {
					this.miniData = res.data
				}
			},
			//获取视频分类
			async getVideoSort() {
				const res = await this.$get('/admin/questionVideo/getVideoSort', {
					pageNumber: 1,
					pageSize: 9999
				})
				if (res.code == 1000) {
					this.videoData = res.data.list
				}
			},
			show(id) {
				this.videoQuery.questionId = id
				this.getQuestionVideo()
				this.getVideoAnalysis()
				this.videoAnalysisVisible = true
			},
			async getVideoAnalysis() {
				const res = await this.$get('/admin/questionVideo/getQuestionVideo', this.videoQuery)
				if (res.code == 1000) {
					this.videoSelectData = res.data.list
				}
			},
			async getQuestionVideo() {
				let params = {
					pageNumber: this.videoQuery.pageNumber,
					pageSize: this.videoQuery.pageSize
				}
				if (this.videoQuery.appid) {
					params.appid = this.videoQuery.appid
				}
				if (this.videoQuery.sort) {
					params.sort = this.videoQuery.sort
				}
				if (this.videoQuery.title) {
					params.title = this.videoQuery.title
				}
				const res = await this.$get('/admin/questionVideo/getQuestionVideo', params)
				this.videoAnalysisData = res.data.list
				this.videoTotal = res.data.totalRow
			},
			async deleteVideoData(index, row) {
				const res = await this.$get('/admin/questionVideo/deleteVideoQuestion', {
					videoId: row.id,
					questionId: this.videoQuery.questionId
				})
				if (res.code == 1000) {
					this.$refs.multipleVideoTable.clearSelection()
					this.getVideoAnalysis()
				}
			},
			handleSelectionVideoChange(val) {
				this.multipleSelection = val
			},
			selecVideotable() {
				if (this.videoSelectData.length == 0) {
					return true
				} else {
					return false
				}
			},
			//分页
			handleSizeVideoChange(val) {
				this.videoQuery.pageSize = val
				this.getQuestionVideo()
			},
			handlePageVideoChange(val) {
				this.videoQuery.pageNumber = val
				this.getQuestionVideo()
			},
		}
	}
</script>

<style>
</style>